<template>
  <a-modal :visible="visible" :maskClosable="false"
           @cancel="hideModal" :width="width+'mm'">
    <a-spin :spinning="spinning" style="min-height: 100px">
      <div id="preview_content_design"></div>
    </a-spin>
    <template slot="title">
      <a-space>
        <div style="margin-right: 20px">打印预览</div>
        <a-button :loading="waitShowPrinter" type="primary" icon="printer" @click.stop="print">打印</a-button>
        <a-button type="primary" icon="printer" @click.stop="toPdf">pdf</a-button>
      </a-space>
    </template>
    <template slot="footer">
      <a-button key="close" type="info" @click="hideModal">
        关闭
      </a-button>
    </template>
  </a-modal>
</template>

<script lang="ts">
import { toRefs } from 'vue';
import importConfig from './previewEle';
export default {
    name: 'printDesign',
    setup() {
        const {
            base,
            hideModal,
            show,
            print,
            toPdf,
        } = importConfig();
        return {
            ...toRefs(base),
            hideModal,
            show,
            print,
            toPdf,
        };
    },
};
</script>

<style lang="less" scoped>
:deep(.ant-modal-body) {
  padding: 0px;
}

:deep(.ant-modal-content) {
  margin-bottom: 24px;
}
</style>
